<template>
    <div class="content-add">
        <Card shadow>
        	<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        		<Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem label="题目题型：" prop="select">
				            <Select v-model="formValidate.select" placeholder="题目题型">
				                <Option value="1">单选题</Option>
				                <Option value="2">多选题</Option>
				                <Option value="3">判断题</Option>
				            </Select>
				        </FormItem>
			        </Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="20" :sm="20" :md="20" :lg="20" class="right">
		        		<FormItem label="题目题干：" prop="content">
		        			<div id="ueditor" type="text/plain"></div>
		        		</FormItem>
		        	</Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="20" :sm="20" :md="20" :lg="20" class="right">
		        		<FormItem label="备选项：" prop="options">
		        			<div id="ueditor2" type="text/plain" v-model='i'></div>
		        			<p class="explain">说明：备选项标准格式：各选项间请用英文状态下“;”号隔开(不清楚格式请复制示例，再修改答案选项)</p>
		        			<p>示例：A. 这是答案;B. 这不是答案;C. 这还不是答案;D. 这好像也不是答案</p>
		        			<p>注释：判断题的时候，备选项格式为:正确;错误</p>
		        		</FormItem>
		        	</Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="20" :sm="20" :md="20" :lg="20" class="right">
		        		<FormItem label="参考答案：" prop="reference">
		        			<div id="ueditor4" type="text/plain"></div>
		        			<p class="reference">说明：单选题/判断题请直接输入备选项中对应的正确选项编号(大写)，多选答案请用分号隔开，如：A;B;C;</p>
		        			<p>注释：判断题的时候，参考答案填写A(正确)或者B(错误)</p>
		        		</FormItem>
		        	</Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="18" :sm="18" :md="18" :lg="18" class="right">
		        		<FormItem label="知识点：" prop="knowledge">
				            <Input v-model="formValidate.knowledge" placeholder=""></Input>
				        </FormItem>
		        	</Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="20" :sm="20" :md="20" :lg="20" class="right">
		        		<FormItem label="专业解析：" prop="specialty">
		        			<div id="ueditor3" type="text/plain"></div>
		        		</FormItem>
		        	</Col>
		        </Row>
		        <Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem label="题目难度：" prop="select2">
				            <Select v-model="formValidate.select2" placeholder="题目难度">
				                <Option value="1">易</Option>
				                <Option value="2">中</Option>
				                <Option value="3">难</Option>
				            </Select>
				        </FormItem>
			        </Col>
		        </Row>
		        <Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem label="是否启用：" prop="gender">
				            <RadioGroup v-model="formValidate.gender" class="operation">
				                <Radio label="1" value='1'>启用</Radio>
				                <Radio label="0" value='0'>禁用</Radio>
				            </RadioGroup>
				        </FormItem>
			        </Col>
		        </Row>
		        <Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem>
				            <Button type="primary" @click="handleSubmit('formValidate')" style="margin-right: 50px">保存</Button>
				            <router-link :to="{name:'subject-management'}"> 
				            	<Button type="ghost">取消</Button>
				            </router-link>
				        </FormItem>
			        </Col>
		        </Row>
		    </Form>
        </Card>
    </div>
</template>
<script>
import '../../../../static/utf8-php/ueditor.config' 
import '../../../../static/utf8-php/ueditor.all'; 
import '../../../../static/utf8-php/lang/zh-cn/zh-cn';
import Cookies from 'js-cookie';
import { router } from '@/router/index.js';
import $store from '@/store/index.js';
import Vue from 'vue';
var $vue=new Vue();
export default {
    data() {
        return {
        	i:'132456',
            formValidate: {
                select: '',
                options:'',
                content:'',
                reference:'',
                knowledge:'',
                select2:'',
                gender:'',
                specialty:''
            },
            ruleValidate: {
                select:[
                    { required: true, message: '请选择题目类型', trigger: 'change' }
                ],
                select2:[
                    { required: true, message: '请选择题目难度', trigger: 'change' }
                ],
                content:[
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ],
                options:[
                    { required: true, message: '请输入备选项', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择一个选项', trigger: 'change' }
                ],
                reference:[
                    { required: true, message: '请输入参考答案', trigger: 'blur' }
                ],
                knowledge:[
                    { required: true, message: '请输入知识点', trigger: 'blur' }
                ],
                specialty:[
                    { required: true, message: '请输入专业解析', trigger: 'blur' }
                ]
            },
            ue: '',
            ue2: '',
            ue3: '',
            ue4: '',
			uedata: [], 
			xierudata: []
        }
    },
    //加载页面创建UE实例
    mounted(){
		this.ue = UE.getEditor('ueditor',{
	    	BaseUrl: '',
	    	UEDITOR_HOME_URL: 'static/utf8-php/'
		}),
	 	this.ue2 = UE.getEditor('ueditor2',{
		    BaseUrl: '',
		    UEDITOR_HOME_URL: 'static/utf8-php/'
		}),
	 	this.ue3 = UE.getEditor('ueditor3',{
		    BaseUrl: '',
		    UEDITOR_HOME_URL: 'static/utf8-php/'
		}),
		this.ue4 = UE.getEditor('ueditor4',{
		    BaseUrl: '',
	    	UEDITOR_HOME_URL: 'static/utf8-php/'
		})
    },
    //加载页面创建多个实例
    destroyed() {
	  this.ue.destroy();
	  this.ue2.destroy();
	  this.ue3.destroy();
	  this.ue4.destroy();
	  
	},
    methods: {
    	//验证函数
        handleSubmit (name) {
        	//验证四个不同的富文本编辑器
        	var text = this.ue.getContentTxt();
        	if(text.length>0){
				this.formValidate.content='000'
			}else{
				this.formValidate.content=''
			}
			var text2 = this.ue2.getContentTxt();
        	if(text2.length>0){
				this.formValidate.options='111'
			}else{
				this.formValidate.options=''
			}
			var text3 = this.ue4.getContentTxt();
        	if(text3.length>0){
				this.formValidate.reference='222'
			}else{
				this.formValidate.reference=''
			}
			var text4 = this.ue3.getContentTxt();
        	if(text4.length>0){
				this.formValidate.specialty='444'
			}else{
				this.formValidate.specialty=''
			}
			//验证整个表单
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                    var that=this
		        	this.axios({
		        		method:'post',
		        		url:that.$store.state.app.globalUrl+'/admin/Subject/add',
		        		data:{
		        			type:that.formValidate.select,
		        			question:that.ue.getContentTxt(),
		        			option:that.ue2.getContentTxt(),
		        			answer:that.ue4.getContentTxt(),
		        			knowledgePoint:that.formValidate.knowledge,
		        			analysis:that.ue3.getContentTxt(),
		        			level:that.formValidate.select2,
		        			status:that.formValidate.gender
		        		}
		        	}).then(function(res){
		        		that.$router.push({
		        			name:'subject-management'
		        		})
		        	})
                } else {
                    this.$Message.error('Fail!');
                }
            });
        },
        //保存富文本编辑器内容
	    save(){
	    	let ueditordata = UE.getEditor('ueditor').getContent();
			Event.$emit('seted', ueditordata);
			let ueditordata2 = UE.getEditor('ueditor2').getContent();
			Event.$emit('seted', ueditordata2);
			let ueditordata3 = UE.getEditor('ueditor3').getContent();
			Event.$emit('seted', ueditordata3);
			let ueditordata4 = UE.getEditor('ueditor4').getContent();
			Event.$emit('seted', ueditordata4);
	    } 
    }
};
</script>
<style>
	.content-add .reference{width: 100%;}
	.content-add .ivu-radio-wrapper{margin-right: 50px;}
	.content-add .operation{padding: 8px 12px 10px 0;}
	.content-add .explain{width: 576px;}
	.content-add .ivu-select-dropdown{z-index: 100000;}
	.content-add .ivu-form-item-content{line-height: 16px;}
</style>